<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import { uuid } from "@/utils/random";
import clickCaptcha from "@/components/clickCaptcha/sum-click-captcha.vue";
import api from "@/api";
import {useThirdStore, useUserStore} from "@/stores";
import type {getSessionIdResType} from "@/types/third";
import {onLoad} from "@dcloudio/uni-app";

const userStore = useUserStore()
const thirdStore = useThirdStore()

const loginForm = reactive({
  captchaId: uuid(),
  username: '',
  password: '',
  captchaInfo: '',
})

const pwdShow = ref(false)
const pactChecked = ref(false)
const showClickCaptcha = ref(false)

// 显示协议
const toPact = (slug:string) => {
  uni.navigateTo({
    url: `/pages/public/richtext?slug=${slug}`,
  })
}
// 勾选协议
const pactChange = () => {
  pactChecked.value = !pactChecked.value
}
const onSubmitPre = () => {
  if (!loginForm.username) {
    uni.showToast({
      title: '请输入账号',
      icon: 'none'
    })
    return
  }
  if (!loginForm.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return
  }
  if (!pactChecked.value) {
    uni.showToast({
      title: '请勾选协议',
      icon: 'none'
    })
    return
  }
  showClickCaptcha.value = true
}

const callbackClickCaptcha= (res) => {
  onSubmit(res.captchaInfo)
}

const onSubmit = (captchaInfo = '') => {
  console.log(captchaInfo)
  loginForm.captchaInfo = captchaInfo
  api.user.accountLogin(loginForm).then((res: ApiResponse) => {
    if (res.code == 1) {
      // userStore.setUserInfo(res.data.userInfo)
      uni.navigateBack({
        delta: 1
      })
    }
  })
}
// 第三方登录
const thirdLogin = async (type: string) => {
  if (!pactChecked.value) {
    uni.showToast({
      title: '请勾选协议',
      icon: 'none'
    })
    return
  }
  wechatLogin()
}

const getSessionId = async (auto_login = null) => {
  // 获取code
  let codeStr = '';
  const loginResult = await uni.login();
  console.log('loginResult', loginResult)
  if (loginResult.errMsg === 'login:ok') {
    codeStr = loginResult.code;
  } else {
    return false;
  }
  await api.third.getSessionIdApi({
    platform: 'miniApp',
    payload: encodeURIComponent(JSON.stringify({
      code: codeStr,
      auto_login
    }))
  }).then((res: ApiResponse<getSessionIdResType>) => {
    if (res.code == 1) {
      thirdStore.setSessionId(res.data.session_id)
      return true;
    }
    return false;
  })
}

const wechatLogin = async () => {
  await api.third.wechatLoginApi({
    platform: 'miniApp',
    payload: encodeURIComponent(JSON.stringify({
      sessionId: thirdStore.sessionId,
    }))
  }).then((res: ApiResponse) => {
    if (res.code == 1) {
      uni.navigateBack({
        delta: 1
      })
    }
  })
}

onLoad(()=>{
  getSessionId()
})

</script>

<template>
  <view class="page">
    <view class="title">
      <view>您好，欢迎登录！</view>
    </view>
    <view class="form">
      <view class="inputs">
        <view class="account">
          <uni-easyinput v-model="loginForm.username" placeholder="账号" :inputBorder=false styles="" primaryColor="#c0c4cc"></uni-easyinput>
        </view>
        <view class="password">
          <uni-easyinput type="password" v-model="loginForm.password" placeholder="密码" :inputBorder=false :clearable=false styles="" primaryColor="#c0c4cc"></uni-easyinput>
        </view>
<!--        <view class="forgetPwd"><text @click="forgetPwd">忘记密码？</text></view>-->
      </view>
      <view class="button">
        <view @click="onSubmitPre">
          登录
        </view>
      </view>
      <view class="tip">
        <text @click="toRegister">没有账号？去注册</text>
        <text> 或 </text>
        <text @click="thirdLogin('wechat')" color="green">微信快捷登录</text>
      </view>
    </view>

    <view class="pact">
      <checkbox-group>
        <checkbox :checked="pactChecked" activeBackgroundColor="#FFD640" activeBorderColor="#FFD640"
                  borderColor="#000000" iconColor="#fff" @click="pactChange" />
      </checkbox-group>
      <view>我已阅读并同意<text @click="toPact('user_protocol')">《用户协议》</text>和<text @click="toPact('privacy_protocol')">《隐私协议》</text></view>
    </view>
  </view>

  <click-captcha v-if="showClickCaptcha" :uuid="loginForm.captchaId" v-model="showClickCaptcha" @callback="callbackClickCaptcha"></click-captcha>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .title {
    padding-top: 500rpx;
    padding-bottom: 120rpx;
    background: url("../../static/login-C/pageBg.png") no-repeat top center;
    background-size: 100%;

    view {
      padding-left: 64rpx;
      font-size: 44rpx;
      font-weight: 700;
      line-height: 1;
    }
  }

  .form {
    flex: 1;
    padding: 0 64rpx;

    .inputs {
      margin-bottom: 132rpx;

      .account,
      .password {
        height: 96rpx;
        border-radius: 48rpx;
        border: 1rpx solid rgba(204, 204, 204, 1);
        padding: 0 48rpx;
        display: flex;
        align-items: center;

        input {
          flex: 1;
        }
      }

      .account {
        margin-bottom: 48rpx;
      }

      .forgetPwd {
        text-align: right;
        padding: 20rpx 0;
      }
    }

    .button {
      view {
        line-height: 96rpx;
        border-radius: 48rpx;
        text-align: center;
        font-size: 32rpx;
        background: linear-gradient(90deg, rgba(255, 222, 102, 1) 0%, rgba(202, 245, 253, 1) 100%);
      }
    }

    .tip {
      font-size: 28rpx;
      text-align: center;
      margin-top: 30rpx;
    }
  }

  .pact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 70rpx;
    font-size: 24rpx;

    text {
      color: #ffde66;
    }

    checkbox {
      :deep(.uni-checkbox-input) {
        border: 1rpx solid #000000;
      }

      transform:scale(0.6)
    }
  }
}
</style>
